<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>歌词滚动</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: #FFE8A3;
      gap: 50px;
      accent-color: #9747FF;
    }

    .container {
      width: 400px;
      height: 208px;
      position: relative;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 20px;
    }

    .lyrics {
      height: 100%;
      overflow: hidden;
    }

    .mask {
      border-radius: 20px;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      box-shadow: inset 0 30px 20px -10px rgba(0, 0, 0, 0.5), inset 0 -30px 20px -10px rgba(0, 0, 0, 0.5);
    }

    p {
      font-size: 20px;
      color: white;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .active {
      transform: scale(1.2);
      color: goldenrod;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="mask"></div>
    <div class="lyrics"></div>
  </div>
  <audio controls autoplay src="./SunflowerFei - 漠河舞厅·2022（女声完整版）.mp3"></audio>

</body>
<script src="./api.js"></script>
<script>
  let lastIndex = -1
  const lines = getLyric()

  window.onload = () => {
    const lyrics = document.querySelector('.lyrics');
    renderLyrics()
    const audio = document.querySelector('audio')
    audio.addEventListener('timeupdate', updatePos)

    const lyricsElements = document.querySelectorAll('.lyrics p')
    const lineHeight = document.querySelector('.lyrics p').offsetHeight;

    // 更新歌词滚动
    function updatePos(e) {
      const index = findIndex(e.target.currentTime)
      if (index == -1 || lastIndex == index) return

      const to = lineHeight * (index - 2)
      scrollTo(lyrics, to)
      setActive(index)
    }

    // 渲染歌词
    function renderLyrics() {
      let html = ''
      for (let item of lines) {
        html += item.content ? `<p>${item.content}</p>` : ` <p class="blank"></p>`
      }
      lyrics.innerHTML = html
    }

    // 获取当前歌词行
    function findIndex(curTime) {
      // 如果当前时间大于最后一行歌词的时间，返回最后一行歌词的索引
      if (curTime > lines[lines.length - 1].time) return lines.length - 1

      for (const key in lines) {
        if (lines[key].time > curTime) {
          return key > 0 ? parseInt(key) - 1 : 0
        }
      }
    }

    // 将指定索引的歌词行设为活动状态
    function setActive(index) {
      lastIndex = index
      // 先移除所有歌词行的活动状态
      lyricsElements.forEach(el => el.classList.remove('active'))
      // 然后给指定索引的歌词行添加活动状态
      lyricsElements[index].classList.add('active')
    }

    // 平滑滚动
    function scrollTo(target, to) {
      const duration = 500
      const start = target.scrollTop
      const change = to - start
      let startTime;

      function animateScroll(curTime) {
        if (!startTime) {
          startTime = curTime;
        }

        const elapsed = curTime - startTime; // 已度过的时间
        const progress = Math.min(elapsed / duration, 1);
        target.scrollTop = start + change * progress;

        if (elapsed >= duration) return
        // 下一次浏览器窗口重绘之前执行函数
        // 让动画更流畅
        requestAnimationFrame(animateScroll);
      }
      requestAnimationFrame(animateScroll);
    }
  }
</script>

</html>